<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf8"/>
	<meta name="viewport" content="initial-scale=1, user-scalable=no"/>
	<title>Location Observer</title>
	<style>
		* {margin:0px; padding:0px;}
		html, body, #map {height: 100%;}
	</style>
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
		$(document).ready(function() {
			function setMarker(latitude, longitude) {
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(latitude, longitude),
					map: map
				});
			};
			
			var name = prompt('enter your name: ', name);
			var socket = io.connect();
			socket.emit('join', name);
			
			// create map
			var temp = document.getElementById('map');
			var map = new google.maps.Map(temp, {
				zoom: 6,
				center: new google.maps.LatLng(37, 126),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			
			// create initial location
			$.getJSON('/show', {name: name}, function(data) {
				$.each(data, function(index, item) {
					setMarker(item.latitude, item.longitude);
				});
			});
			
			// socket event
			socket.on('receive', function(data) {
				setMarker(data.latitude, data.longitude);
			});
		});
	</script>
</head>
<body>
	<div id="map"></div>
</body>
</html>